import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
import { getUseList } from './require'
function ReactHook() {
    const [useList, setUseList] = useState([])
    const [ loading , setLoading ] = useState(true)
    useLayoutEffect(() => {
      async function  EffectFunc(){
        console.log('effect')
        const useList = await getUseList()
        setUseList(useList)
        setLoading(false)
       }
       EffectFunc()
       return ()=>{
        console.log('return')
       }
    }, [])
    requestAnimationFrame(()=>{
        console.log('一震')
    })
    requestIdleCallback(()=>{
        console.log('idle')
    })
    // useMemo(()=>{
    //     const timeStamp = Date.now()
    // while(Date.now() < timeStamp + 3000){
    //   console.log('stop render',Date.now()-timeStamp)
    // }
    // },[])
    return (<>
        <div>{ loading && '正在加载中' }</div>
        { useList.length === 0 && !loading ?<div>暂无用户数据</div>:'' }
        { useList.map(item => {
            return <div key={item.name
            }>{ item.name }-{item.age
            }</div>
        }) }
    </>)
}

export default ReactHook